<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-11-25 09:11:58
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-07-04 16:17:53
 * @FilePath: /things-admin/src/view/createquestion/createquestion.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="core">
    <div class="left">
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />问卷id：</span
        >
        <Input :disabled="isEdit" v-model="id" style="width: 300px" />
        <span class="hidden" v-show="!(id || isShow)">问卷id不能为空</span>
      </Space>
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />问卷名称：</span
        >
        <Input :disabled="edit" v-model.trim="name" style="width: 300px" />
        <span class="hidden" v-show="!(name || isShow)">问卷名称不能为空</span>
      </Space>
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />型号选择：</span
        >
        <Select
          v-model="model"
          :disabled="edit"
          style="width: 300px; margin-right: 10px"
          placeholder="型号"
        >
          <Option
            v-for="item in modelList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="hidden" v-show="!(model || model == 0 || isShow)"
          >型号选择不能为空</span
        >
      </Space>
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />性别选择：</span
        >
        <Select
          v-model="sex"
          style="width: 300px; margin-right: 10px"
          placeholder="性别"
          :disabled="edit || userIdArr.length"
        >
          <Option
            v-for="item in sexList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="hidden" v-show="!(sex >= 0 || isShow)">性别不能为空</span>
      </Space>
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />省份选择：</span
        >
        <Select
          v-model="provinceId"
          style="width: 300px; margin-right: 10px"
          placeholder="省份"
          @on-change="changeProvince"
          :disabled="edit || userIdArr.length"
        >
          <Option
            v-for="item in provinceIdArr"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="hidden" v-show="!(provinceId >= 0 || isShow)"
          >省份不能为空</span
        >
      </Space>
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />城市选择：</span
        >
        <Select
          v-model="cityId"
          style="width: 300px; margin-right: 10px"
          placeholder="城市"
          :disabled="edit || userIdArr.length"
        >
          <Option
            v-for="item in cityIdArr"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="hidden" v-show="!(cityId >= 0 || isShow)"
          >城市不能为空</span
        >
      </Space>
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />展示场景：</span
        >
        <Select
          v-model="scene"
          style="width: 300px;margin-right: 10px"
          placeholder="场景"
          :disabled="edit"
        >
          <Option
            v-for="item in sceneArr"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="hidden" v-show="!(scene >= 0 || isShow)"
          >场景不能为空</span
        >
      </Space>
      <!-- <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />在线程序选择：</span
        >
        <Select
          v-model="modelone"
          style="width: 300px; margin-right: 10px"
          placeholder="在线程序"
        >
          <Option
            v-for="item in cityListone"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <span class="hidden" v-show="!(modelone || isShow)"
          >在线程序选择不能为空</span
        >
      </Space> -->
      <Space style="display: block; margin-top: 20px">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />有效时间：</span
        >
        <Space size="large" wrap>
          <DatePicker
            type="datetimerange"
            v-model="time"
            :disabled="edit"
            placeholder="有效时间"
            style="width: 300px"
            @on-change="changeDate"
          />
        </Space>
        <span class="hidden" v-show="!(time[0] || isShow)"
          >有效时间不能为空</span
        >
      </Space>

      <Space style="display: flex; margin: 20px 0; flex-wrap: wrap">
        <span style="display: inline-block; width: 120px"
          ><Icon
            type="ios-medical-outline"
            color="red"
            style="margin-right: 2px"
          />题目：</span
        >
        <!-- <Table
          border
          :columns="columns"
          :data="questionnaireSpecificVos"
          width="642"
          height="400"
          @sort-change="handleSortChange"
        > 
          <template    slot-scope="{ row, index }" slot="id">{{
            index + 1
          }}</template>
          <template slot-scope="{ row, index }" slot="questionType">{{
            row.questionType == 1
              ? "单选"
              : row.questionType == 2
              ? "多选"
              : "填空"
          }}</template>
          <template slot-scope="{ row, index }" slot="status">
            <el-switch
            :disabled="edit"
              v-model="row.status"
              active-color="#2d8cf0"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>

          <template #action="{ row, index }">
            <Button
            :disabled="edit"
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="detailPage(row, index)"
              >详情</Button
            >
            <Button
            :disabled="edit"
              type="success"
              size="small"
              @click="editPage(row, index)"
              style="margin-right: 5px"
              >编辑</Button
            >
            <Button
            :disabled="edit"
              type="error"
              size="small"
              @click="deletePage(row, index)"
              style="margin-right: 5px"
              >删除</Button
            >
          </template>
        </Table> -->
        <table class="itxst">
          <theader v-for="(item, index1) in columns" :key="index1"
            ><div
              style="display: inline-block; height: 30px; line-height: 30px"
              :id="item.slot"
            >
              {{ item.title }}
            </div></theader
          >
          <draggable
            v-model="questionnaireSpecificVos"
            animation="500"
            force-fallback="true"
            handle=".move"
            @start="onStart"
            @end="onEnd"
            style="height: 380px; overflow: auto"
          >
            <tr
              class="move"
              v-for="(item, index) in questionnaireSpecificVos"
              :key="item.id"
            >
              <td style="width: 50px; border-left: none">{{ index + 1 }}</td>
              <td style="width: 200px">{{ item.questionContent }}</td>
              <td style="width: 50px">
                {{
                  item.questionType == 1
                    ? "单选"
                    : item.questionType == 2
                    ? "多选"
                    : "填空"
                }}
              </td>
              <td style="width: 50px">
                <el-switch
                  :disabled="edit"
                  v-model="item.status"
                  active-color="#2d8cf0"
                  inactive-color="#ccc"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </td>
              <td style="width: 200px; border-right: none">
                <div
                  style="
                    display: flex;
                    justify-content: space-around;
                    height: 100%;
                  "
                >
                  <Button
                    :disabled="edit"
                    type="primary"
                    size="small"
                    style="margin-right: 5px"
                    @click="detailPage(item, index)"
                    >详情</Button
                  >
                  <Button
                    :disabled="edit"
                    type="success"
                    size="small"
                    @click="editPage(item, index)"
                    style="margin-right: 5px"
                    >编辑</Button
                  >
                  <Button
                    v-if="!isEdit"
                    :disabled="edit"
                    type="error"
                    size="small"
                    @click="deletePage(row, index)"
                    style="margin-right: 5px"
                    >删除</Button
                  >
                </div>
              </td>
            </tr>
          </draggable>
        </table>

        <div v-show="isAdd && !isEdit" class="icon" @click="openPage">
          <Icon style="font-size: 40px" type="md-add" />
        </div>
        <div class="addPage" v-if="isSHow">
          <Space style="display: block; margin-top: 50px; margin-left: 20px">
            <span style="display: inline-block; width: 80px"
              ><Icon
                type="ios-medical-outline"
                color="red"
                style="margin-right: 2px"
              />题目：</span
            >
            <Input
              v-model="obj.questionContent"
              style="width: 200px"
              :disabled="disabled"
            />
          </Space>
          <Space style="display: block; margin-top: 20px; margin-left: 20px">
            <span0 style="display: inline-block; width: 80px"
              ><Icon
                type="ios-medical-outline"
                color="red"
                style="margin-right: 2px"
              />类型：</span0
            >
            <Select
              v-model="obj.questionType.type"
              style="width: 200px; margin-right: 10px"
              placeholder="类型"
              :disabled="disabled"
            >
              <Option
                v-for="item in cityListtwo"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
            <Select
              v-show="obj.questionType.type == 2"
              v-model="obj.questionType.num"
              style="width: 120px; margin-right: 10px"
              placeholder="最多选几项"
              :disabled="disabled"
            >
              <Option
                v-for="item in cityListthree"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Space>
          <Space
            style="display: block; margin-top: 100px; margin-left: 20px;height: 270px;overflow-y: auto;"
          >
            <span style="display: inline-block; width: 80px"
              ><Icon
                type="ios-medical-outline"
                color="red"
                style="margin-right: 2px"
              />选项：</span
            >
            <div
              v-for="(item, index) in obj.options"
              :key="index"
              style="position: relative; width: 300px; display: inline-block"
              :class="index > 0 ? 'shifting' : ''"
            >
              <Input
                v-model="item.optionContent"
                style="padding-right: 160px"
                :style="{
                  'padding-right':
                    obj.questionType.type == 1
                      ? '100px'
                      : obj.questionType.type == 2
                      ? '160px'
                      : '0px'
                }"
                :disabled="disabled"
              />
              <div
                class="child_select"
                style="display: flex"
                v-show="obj.questionType.type == 1"
              >
                <div style="font-size: 12px">跳转逻辑：</div>
              </div>
              <input
                :disabled="disabled"
                v-model="item.jumppage"
                v-show="obj.questionType.type == 1"
                class="child_input"
                type="text"
              />
              <div
                class="child_select"
                style="display: flex; right: 0"
                v-show="obj.questionType.type == 2"
              >
                <div style="font-size: 12px">是否添加补充框：</div>
                <select v-model="item.jump" :disabled="disabled">
                  <option
                    v-for="(item, index) in dan_select"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </option>
                </select>
              </div>
              <span
                v-show="index == obj.options.length - 1 && !disabled"
                style="cursor: pointer; background-color: #bab7b7"
                @click="addList"
                ><Icon style="font-size: 16px" type="md-add"
              /></span>
              <span
                v-show="index == obj.options.length - 1 && !disabled"
                style="
                  cursor: pointer;
                  background-color: #bab7b7;
                  margin-left: 100px;
                "
                @click="removeList"
                ><Icon style="font-size: 16px" type="md-close"
              /></span>
            </div>
          </Space>
          <div style="display: flex; justify-content: center; margin-top: 50px">
            <Button type="primary" size="default" @click="addMessage"
              >{{ title }}
            </Button>
          </div>
        </div>
      </Space>
      <div class="hidden" v-show="!(questionnaireSpecificVos.length || isShow)">
        题目不能为空
      </div>
      <div class="fotter">
        <Button
          v-show="isEdit"
          type="primary"
          size="default"
          @click="editQuestionPage"
          style="margin: 50px 350px 50px 150px"
          >{{ isEdit && edit ? "编辑" : "返回" }}
        </Button>
        <Button
          type="primary"
          v-show="!isEdit"
          size="default"
          @click="returnPage"
          style="margin: 50px 350px 50px 150px"
          >{{ isEdit ? "编辑" : "提交" }}
        </Button>
        <Button
          v-show="!isEdit"
          type="primary"
          size="default"
          @click="value1 = true"
          >预览
        </Button>
        <Button
          v-show="isEdit && !edit"
          type="primary"
          size="default"
          @click="returnPage"
          >保存
        </Button>
      </div>
    </div>
    <!-- 预览 -->
    <Drawer :width="30" title="预览" :closable="false" v-model="value1">
      <Questionchild :questionnaireSpecificVos="questionnaireSpecificVos" />
    </Drawer>
  </div>
</template>

<script>
import Questionchild from "./Questionchild.vue";
import draggable from "vuedraggable";
import { getDeviceMaintainList } from "@/base/api/DeviceMaintainApi";
import { getProvince, getCity } from "@/base/api/DataScreen";
import {
  CreateQuestion,
  questionnaireEdit,
  questionnaireID
} from "@/base/api/Question";
export default {
  data() {
    return {
      drag: false,
      isPlugin: 1, // 是否在插件展示
      id: "",
      isFirstSave: true,
      model: "",
      indexId: "",
      provinceId: -1,
      cityId: -1,
      cityIdArr: [],
      provinceIdArr: [],
      scene: -1, // 0全部 1开屏页 2插件
      sceneArr: [
        { value: 0, label: "全部" },
        { value: 1, label: "开屏页" },
        { value: 2, label: "插件" }
      ],
      value1: false,
      direction: "ttb",
      name: "",
      time: [],
      title: "",
      xuanxiang: 1,
      sex: -1,
      editObj: {},
      modelone: "",
      userIdArr: [],
      cityListone: [
        {
          value: "轻松按摩",
          label: "轻松按摩"
        }
      ],
      sexList: [
        {
          value: 0,
          label: "男"
        },
        {
          value: 1,
          label: "女"
        },
        {
          value: 2,
          label: "全部"
        }
      ],
      modelList: [],
      isAdd: true,
      edit: this.isEdit,
      disabled: false,
      isSHow: false,
      obj: {
        questionContent: "",
        questionId: "",
        questionType: {
          type: "",
          num: 0
        },
        status: 1,
        options: [
          {
            optionContent: "", // 选项内容
            jump: "", //添加补充框
            jumppage: "" //跳转哪一题
          },
          {
            optionContent: "",
            jump: "",
            jumppage: ""
          }
        ]
      },

      columns: [
        {
          title: "序号",
          slot: "id"
        },
        {
          title: "题目",
          slot: "questionContent",
          width: 200
        },
        {
          title: "类型",
          slot: "questionType"
        },
        {
          title: "状态",
          slot: "status"
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 200
        }
      ],
      cityListthree: [
        {
          value: 1,
          label: "最多一项"
        },
        {
          value: 2,
          label: "最多两项"
        },
        {
          value: 3,
          label: "最多三项"
        },
        {
          value: 4,
          label: "最多四项"
        },
        {
          value: 5,
          label: "最多五项"
        },
        {
          value: 0,
          label: "全部选择"
        }
      ],
      questionnaireSpecificVos: [],
      dan_select: [
        {
          value: 1,
          label: "无"
        },
        {
          value: 2,
          label: "填空补充"
        }
      ],
      isAddSelect: [
        {
          value: 0,
          label: "否"
        },
        {
          value: 1,
          label: "是"
        }
      ],
      cityListtwo: [
        {
          value: 1,
          label: "单选"
        },
        {
          value: 2,
          label: "多选"
        },
        {
          value: 3,
          label: "填空"
        }
      ],
      isShow: this.$route.query.status
    };
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: { Questionchild, draggable },
  watch: {
    questionnaireSpecificVos: {
      handler: function(newVal) {
        // 数组发生变化时的处理逻辑

        this.questionnaireSpecificVos = newVal;
      },
      deep: true // 指定深度监听数组
    }
  },
  mounted() {
    this.getProvince();
    this.getCity();
    //查询所有机型以及型号ID
    getDeviceMaintainList({
      pageIndex: 1,
      pageSize: 1000,
      sortId: 1324949759328288,
      sortDirection: "DESC"
    }).then(res => {
      // console.log(res);
      res.data.items.forEach(item => {
        let obj = {};
        obj.value = item.id;
        obj.label = item.modelName;
        this.modelList.push(obj);
      });
      let objAll = {
        value: 0,
        label: "全部机型"
      };
      //全部型号
      this.modelList.push(objAll);
    });
    if (this.$route.query.userIdArr) {
      var userIdArr = this.$route.query.userIdArr
      userIdArr.forEach(item => {
        this.userIdArr.push(item.id);
      });
      this.sex = 2;
      this.cityId = 0;
      this.provinceId = 0;
    }

    //根据传入的数据给图表赋值
    // this.afferentdata
    if (this.$route.query.id) {
      questionnaireID(this.$route.query.id).then(res => {
        this.id = res.data.id;
        this.provinceId = res.data.provinceId;
        this.sex = Number(res.data.sex);
        this.cityId = res.data.cityId;
        this.time = [`${res.data.startTime}`, `${res.data.endTime}`];
        this.name = res.data.questionnaireName;
        this.model = res.data.modelId;
        this.scene = res.data.displayRange;
        this.modelone = "轻松按摩";
        // this

        this.questionnaireSpecificVos = res.data.questionnaireSpecificVos;
      });
    }
    // console.log(this.time, 'console.log(this.time.length)')
  },

  methods: {
    handleSortChange({ newIndex, oldIndex }) {
      const movedItem = this.tableData.splice(oldIndex, 1)[0];
      this.tableData.splice(newIndex, 0, movedItem);
    },
    addList() {
      this.obj.options.push({
        optionContent: "",
        jump: "",
        jumppage: ""
      });
    },
    removeList() {
      if (this.obj.options.length <= 2) {
        this.$message.error("基础选项不可删除");
      } else {
        this.obj.options.pop();
      }
    },
    //获取省份信息
    getProvince() {
      this.provinceIdArr = [];
      getProvince("").then(res => {
        this.provinceIdArr.push({
          value: 0,
          label: "全部省份"
        });
        res.data.forEach(item => {
          let obj = {
            value: item.id,
            label: item.name
          };
          this.provinceIdArr.push(obj);
        });
      });
    },
    changeProvince(data) {
      this.getCity(data);
    },
    //获取城市信息
    getCity(data) {
      this.cityIdArr = [];
      let id = data || "";
      getCity("", id).then(res => {
        if (data) {
        } else {
          this.cityIdArr.push({
            value: 0,
            label: "全部城市"
          });
        }

        res.data.forEach(item => {
          let obj = {
            value: item.id,
            label: item.name
          };
          this.cityIdArr.push(obj);
        });
      });
    },
    editQuestionPage() {
      if (!this.edit) {
        this.$router.push("/questionnaire");
      }
      this.edit = false;
    },
    //抽屉的回调
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //时间改变记录
    changeDate(data) {
      this.time = [];
      this.time = data;
    },
    //打开题目添加页
    openPage() {
      this.isSHow = true;
      this.isAdd = false;
      this.title = "添加";
      this.disabled = false;
      this.indexId = "";
      this.obj.questionContent = "";
      this.obj.questionType.type = "";
      this.obj.questionType.num = 0;
      this.obj.status = 1;
      this.obj.options = [
        {
          optionContent: "",
          jump: "",
          jumppage: ""
        },
        {
          optionContent: "",
          jump: "",
          jumppage: ""
        }
      ];
    },
    //返回问卷调查页
    openQuestionPage() {
      this.$router.push("/questionnaire");
    },
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },
    //编辑题目
    editPage(data, index) {
      // console.log(data);
      this.isSHow = true;
      this.isAdd = false;
      this.disabled = false;
      this.title = "编辑";
      this.indexId = index + 10;
      this.obj.questionContent = data.questionContent;
      this.obj.questionType.type = data.questionType;
      this.obj.questionType.num = data.selectNum;
      this.obj.status = data.status;
      this.obj.options = data.options;
      this.obj.questionId = data.questionId;
    },
    deletePage(data, index) {
      this.questionnaireSpecificVos.splice(index, 1);
    },
    // 预览
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    //提交并返回上一页
    returnPage() {
      if (
        this.id &&
        (this.model || this.model == 0) &&
        this.name &&
        this.time[0] &&
        this.questionnaireSpecificVos.length &&
        this.sex >= 0 &&
        this.provinceId >= 0 &&
        this.cityId >= 0 &&
        this.scene >= 0
      ) {
        if (this.isEdit && this.isFirstSave) {
          this.isFirstSave = false;
          this.time[0] = this.formatDate(this.time[0]);
          this.time[1] = this.formatDate(this.time[1]);
        }
        // 添加排序编号
        this.questionnaireSpecificVos.forEach((item,index)=>{
          item.sort = index+1
        })
        let params = {
          id: this.id,
          modelId: this.model,
          questionnaireName: this.name,
          startTime: this.time[0],
          provinceId: this.provinceId,
          cityId: this.cityId,
          sex: this.sex,
          displayRange: this.scene,
          memberIds: this.userIdArr.length ? this.userIdArr : [],
          endTime: this.time[1],
          questionnaireSpecificVos: this.questionnaireSpecificVos,
          status: 1,
          range: 0
        };
        console.log(params)
        if (!this.isEdit) {
          CreateQuestion(params).then(res => {
            // console.log(res);
            this.$message.success("添加成功");
            this.$router.push("/questionnaire");
          });
        } else {
          questionnaireEdit(params).then(res => {
            // console.log(res);
            this.$message.success("保存成功");
          });
        }
      } else {
        this.isShow = false;
      }
    },
    formatDate(date) {
      // console.log(date);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    //查看问卷详情页
    detailPage(data, index) {
      // console.log(data, 222);
      this.isSHow = true;
      this.isAdd = false;
      this.title = "关闭详情";
      this.indexId = index + 10;
      this.disabled = true;
      this.obj.questionContent = data.questionContent;
      this.obj.questionType.type = data.questionType;
      this.obj.questionType.num = data.selectNum;
      this.obj.status = data.status;
      this.obj.options = data.options;
    },
    //添加或者编辑题目
    addMessage() {
      // console.log(this.obj.options[0].jumppage == 0, "dasghdhajs");
      //首先判断题目进入 是添加还是编辑
      if (
        this.obj.questionContent &&
        this.obj.questionType.type &&
        (this.obj.questionType.type == 3 ||
          (this.obj.options[0].optionContent &&
            (this.obj.options[0].jump ||
              this.obj.options[0].jumppage ||
              this.obj.options[0].jumppage === 0)))
      ) {
        this.obj.options = this.obj.options.filter(item => {
          return (
            item.optionContent &&
            (item.jumppage == 0 || item.jump || item.jumppage)
          );
        });
        var objcontent = {
          questionContent: this.obj.questionContent,
          questionType: this.obj.questionType.type,
          selectNum: this.obj.questionType.num,
          options: this.obj.options,
          status: this.obj.status,
          questionId: this.obj.questionId || ""
        };
        console.log(objcontent);
        if (this.indexId) {
          //编辑
          this.questionnaireSpecificVos.splice(
            this.indexId - 10,
            1,
            objcontent
          );
        } else {
          if (this.questionnaireSpecificVos.length >= 20) return false;
          this.questionnaireSpecificVos.push(objcontent);
          // console.log(this.questionnaireSpecificVos);
        }
        this.isSHow = false;
        this.isAdd = true;
      } else {
        this.$message.error("填写内容不能为空");
      }
    }
  }
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1620px) {
  .core {
    .left {
      margin: 40px 0 0 40px;
      .hidden {
        display: block;
        margin-left: 120px;
        font-size: 12px;
        color: red;
      }
      .addPage {
        width: 460px;
        height: 600px;
        // background-color: #873232;
        border: 1px solid rgba(182, 169, 169, 0.5);
        margin-top: -200px;
        margin-left: 100px;
        overflow: auto;
        .child_select {
          position: absolute;
          top: 5px;
          right: 30px;
        }
        .child_input {
          position: absolute;
          top: 5px;
          right: 0;
        }
        .shifting {
          margin-left: 80px;
        }
      }
      .footer {
        margin: 40px 0 40px 240px;
      }
      .icon {
        display: inline-block;
        cursor: pointer;
        background-color: #bab7b7;
        height: 40px;
        margin-top: 360px;
      }
    }
  }
}
@media screen and (max-width: 1620px) and (min-width: 1120px) {
  .core {
    .left {
      margin: 40px 0 0 40px;
      .hidden {
        display: block;
        margin-left: 120px;
        font-size: 12px;
        color: red;
      }
      .addPage {
        width: 450px;
        height: 600px;
        // background-color: #873232;
        border: 1px solid rgba(182, 169, 169, 0.5);
        margin-top: 20px;
        margin-left: 120px;
        // margin-left: 100px;
        .child_select {
          position: absolute;
          top: 5px;
          right: 30px;
        }
        .child_input {
          position: absolute;
          top: 5px;
          right: 0;
        }
        .shifting {
          margin-left: 80px;
        }
      }
      .icon {
        cursor: pointer;
        background-color: #bab7b7;
        height: 40px;
        margin-top: 360px;
      }
    }
  }
}
@media screen and (max-width: 1120px) {
  .core {
    .left {
      margin: 40px 0 0 40px;
      .hidden {
        display: block;
        margin-left: 120px;
        font-size: 12px;
        color: red;
      }
      .addPage {
        width: 450px;
        height: 600px;
        // background-color: #873232;
        border: 1px solid rgba(182, 169, 169, 0.5);
        margin-top: 20px;
        // margin-left: 100px;
        .child_select {
          position: absolute;
          top: 5px;
          right: 30px;
        }
        .child_input {
          position: absolute;
          top: 5px;
          right: 0;
        }
        .shifting {
          margin-left: 80px;
        }
      }
      .icon {
        cursor: pointer;
        background-color: #bab7b7;
        height: 40px;
      }
    }
  }
}
select {
  width: 60px;
  height: 16px;
  outline: none;
  margin-right: 5px;
  font-size: 12px;
}
input {
  width: 20px;
  height: 16px;
  outline: none;
  margin: 0 5px;
  font-size: 12px;
}
.el-icon-close {
  position: absolute;
  right: 40px;
  top: 80px;
  font-size: 30px;
  color: red;
}
table.itxst {
  color: #333333;
  border: #ddd solid 1px;
  border-collapse: collapse;
}

table.itxst th {
  border: #ddd solid 1px;
  padding: 8px;
  background-color: #dedede;
}

table.itxst td {
  border: #ddd solid 1px;
  padding: 8px;
  background-color: #ffffff;
}

table.itxst tr {
  cursor: pointer;
}

table.itxst td.move:hover {
  cursor: move;
}
#id,
#questionType,
#status {
  width: 50px;
  padding-left: 2px;
  // background-color: #dedede;
  // border: #ddd solid 1px;
}
#questionContent,
#action {
  width: 200px;
  padding-left: 2px;
  // background-color: #dedede;
}
</style>
